<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid blue;"></canvas>
	</body>
	<script>
		var canvas = document.getElementById('canvas')
		var cxt = canvas.getContext('2d')
		canvas.width = 550;
		canvas.height = 400;

		var i = 0
		var settime = window.setInterval(function() {
			var gnt = cxt.createRadialGradient(60, 60, 0, 60, 60, 60)
			gnt.addColorStop(0 * i, 'magenta')
			gnt.addColorStop(0.25 * i, 'blue')
			gnt.addColorStop(0.5 * i, 'green')
			gnt.addColorStop(0.75 * i, 'yellow')
			gnt.addColorStop(1 * i, 'hotpink')
			cxt.fillStyle = gnt
			i += 0.1
			if(i >= 1) {
				i = 0
			}
			cxt.fillRect(0, 0, 120, 120)
		},100)
	</script>

</html>